<template>
  <div>
    <el-card shadow="never">
      <el-row>
        <el-radio-group v-model="period" @change="clickPeriod">
            <el-radio-button label="day">按日</el-radio-button>
            <el-radio-button label="week">按周</el-radio-button>
            <el-radio-button label="month">按月</el-radio-button>
            <el-radio-button label="year">按年</el-radio-button>
          </el-radio-group>
          <el-date-picker style="width: 320px;"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          v-model="chooseDate"
          :value="chooseDate"
          @change="changeChooseDate" type="daterange"
          range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <p style="margin: 0 0 20px 0;font-size: 18px;">出入口热力图</p>
      <div style="margin: 0 0 10px 50px;">
        <!-- <el-radio v-model="radio" label="1" @change="changeRadio1">去重客流</el-radio>
        <el-radio v-model="radio" label="2" @change="changeRadio2">销售额(元)</el-radio>
        <el-radio v-model="radio" label="3" @change="changeRadio3">订单数</el-radio>
        <el-radio v-model="radio" label="4" @change="changeRadio4">客单价(元)</el-radio> -->
      </div>
      <chart :options="regionalChartsOptions" style="height: 300px;"></chart>
    </el-card>
    <el-card shadow="never">
      <p style="margin: 0 0 20px 0;font-size: 18px;">客流分析表</p>
      <el-table :data="contrastData" v-loading="loading" style="width: 100%">
        <el-table-column prop="region" label="位置"></el-table-column>
        <el-table-column prop="flowRate" label="客流占比"></el-table-column>
        <el-table-column prop="removelDuplicateCnt" label="去重客流"></el-table-column>
        <el-table-column prop="newPassengerCnt" label="新客流"></el-table-column>
        <el-table-column prop="repeatCustomersCnt" label="回头客客流"></el-table-column>
        <el-table-column prop="repeatCustomersCnt" label="会员客流"></el-table-column>
        <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import Chart from '@/components/Charts'
import { formatDate } from "@/utils"
import { formatDate3 } from "@/utils"
import { mapState } from 'vuex'
export default {
  name: 'PNTimeContrast',
  components: {
     HeaderTitle,
     Chart
  },
  data(){
    return {
      loading: true,
      hourIsShow: true, // 是否显示 时 选择器
      // 选择日期
      chooseDate: [formatDate(new Date()),formatDate(new Date())],
      
      period: 'day', // string	true	标识	hour.小时 day.天 offset_week.相对周 offset_month.相对月 offset_year.相对年
      startDate: new Date(),
      endDate: new Date(),
      // 对比图
      radio: '1',
      // 对比表
      contrastData: []
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      // 对比图
      this.getRegionalChartsData(formatDate3(this.startDate, "yyyy-MM-dd hh:mm:ss"), formatDate3(this.endDate, "yyyy-MM-dd hh:mm:ss"))
    }
  },
  computed: {
    // 对比图
    ...mapState('peopleNumber',['regionalChartsOptions'])
  },
  mounted(){
    // 对比图
    var today = new Date()
    this.startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0,0,0)
    this.endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23,59,59)
    this.getRegionalChartsData(formatDate3(this.startDate, "yyyy-MM-dd hh:mm:ss"), formatDate3(this.endDate, "yyyy-MM-dd hh:mm:ss"))
  },
  methods:{
    // 选择日期
    changeChooseDate(date){
      console.log(date)
      this.startDate = new Date(date[0])
      this.endDate = new Date(date[1])
      this.startDate = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate(), 0,0,0)
      this.endDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate(), 23,59,59)
      this.getRegionalChartsData(formatDate3(this.startDate, "yyyy-MM-dd hh:mm:ss"), formatDate3(this.endDate, "yyyy-MM-dd hh:mm:ss"))
    },
    clickPeriod(tab){
      this.period = tab
      var today = new Date()
      switch(tab){
        case "day":
          this.startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0,0,0)
          this.endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23,59,59)
          break
        case "week":
          today.setDate(today.getDate() - today.getDay()+1);
          this.startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0,0,0)
          today.setDate(today.getDate() + 6);
          this.endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23,59,59)
          break
        case "month":
          this.startDate = new Date(today.getFullYear(), today.getMonth(), 1, 0,0,0)
          this.endDate = new Date(today.getFullYear(), today.getMonth()+1, 0, 23,59,59)
          break
        case "year":
          this.startDate = new Date(today.getFullYear(), 1, 1, 0,0,0)
          this.endDate = new Date(today.getFullYear(), 12, 31, 23,59,59)
          break
      }
      // 对比图
      this.getRegionalChartsData(formatDate3(this.startDate, "yyyy-MM-dd hh:mm:ss"), formatDate3(this.endDate, "yyyy-MM-dd hh:mm:ss"))
    },
  
    // 对比图
    getRegionalChartsData(startDate, endDate){
      this.$store.dispatch('peopleNumber/fetchRegionalChartsData', {startDate, endDate}).then(
        data => {
          console.log("respones data", data)
          this.loading = false
          this.contrastData = data.table
        }
      ).catch(err => {
        this.loading = false
        this.contrastData = []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.el-tag{
  font-size: 18px;
  padding: 0 18px;
}
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 10px;
}
</style>
